import { Toast } from 'antd-mobile';
import React from 'react';
import ReactDOM from 'react-dom';
import mzsdk from "../../../../utils/mzsdk";

/**
 * 需要注意的是：
 * 1. 活动创建的时候，账号已经开通了清晰度权限，直播和回放才有清晰度选择的功能。所以旧活动是没有清晰度选择的数据。
 * 2. 录播活动是没有清晰度功能的。
 * 3. 活动刚结束后，转码是需要一点时间的，根据视频长度时间不等。
 */

var totalPlayTime = 0;//播放时长(秒)，记录当前的播放时长，用于切换清晰度时，从当前时长开始播放
var playSrcs = [];//清晰度播放源
var isLive = false;//是否是直播
var definitionString = "";//当前切换的文案

// 添加清晰度按钮，如果播放源为空，就不添加
export function initDefinitionManager(hls, isLiveTicket) {
    if (!hls || hls.length <= 0) {
        return;
    }
    playSrcs = hls;
    isLive = isLiveTicket;

    addDefinitionMenu();
}

// 添加清晰度按钮
function addDefinitionMenu() {
    var definitionEle = document.getElementById("qualityMenu");
    if (definitionEle) {//已经添加了清晰度按钮
        return;
    }

    let vjsControlBar = document.querySelector('.vjs-control-bar');
    let picInPic = document.querySelector('.vjs-picture-in-picture-control');
    var dom = document.createElement('div');

    // qualityDom
    const qualityDom = (
        <div id="qualityMenu" style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
            <select id="qualityMenuSelect" className="qualityMenuSelect" defaultValue="opel" onChange={changeDefinition}>
                {
                    playSrcs.map((item, index) => {
                        return (
                            <option key={index} value={index}>{item.txt}</option>
                        )
                    })
                }
            </select>
        </div>
    );
    ReactDOM.render(qualityDom, dom);
    vjsControlBar.insertBefore(dom, picInPic);
}

// 更改分辨率
function changeDefinition() {
    // 移除大的播放按钮
    var playBigButton = document.getElementsByClassName("vjs-big-play-button")[0];
    if (playBigButton) {
        playBigButton.remove();
    }

    var definitionEle = document.getElementById("qualityMenuSelect");
    var definitionIndex = definitionEle.options[definitionEle.selectedIndex].value;
    var object = playSrcs[definitionIndex];

    if (!object || !object.url || object.url.length <= 0) {
        console.log('切换的清晰度播放源不存在')
        return;
    }

    console.log('选择的清晰度：', object)

    var currentTime = Math.floor(mzsdk.player.video.currentTime());

    totalPlayTime = isLive == false ? currentTime : 0;

    console.log("播放总时长", currentTime);

    definitionString = object.txt;
    Toast.info(object.txt + '视频切换中...', 20)

    // mzsdk.player.video.poster("");//隐藏封面
    mzsdk.player.video.autoplay(true);// 设置自动播放

    // 添加错误回调监听
    addListenter()

    setTimeout(() => {
        mzsdk.player.video.src(object.url);
        mzsdk.player.video.load(object.url);
    }, 1000);
}

// 添加 成功/失败 回调监听
function addListenter() {
    mzsdk.player.video.off("loadedmetadata");
    mzsdk.player.video.off("error");

    // 切换清晰度的流资源加载完成
    mzsdk.player.video.on("loadedmetadata", function (e) {
        console.log('加载完成');
        if (isLive == false) {
            document.querySelector("video").currentTime = totalPlayTime;
        }
        if (definitionString.length > 0) {
            Toast.info('切换到' + definitionString + '成功', 1.5);
            setTimeout(() => {
                definitionString = "";
            }, 1500);
        }
        // 切换成功了，去掉error的监听
        mzsdk.player.video.off("error");
    })
    // 切换清晰度流播放错误
    // 直播有可能因为流延迟，导致切换清晰度流失败，可以按照具体的业务逻辑处理
    mzsdk.player.video.on("error", function (e) {
        setTimeout(() => {
            location.reload();
        }, 5000);
    });

}
